<template>
  <div class="pagestyle">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-radio-group v-model="radio1">
          <el-radio-button label="1">表格设置</el-radio-button>
          <el-radio-button label="2">编号规则</el-radio-button>
        </el-radio-group>
      </el-col>
      <el-col :span="24" v-if="radio1 == 1">
        <div class="style">
          <div class="table_style" style="margin-top: 10px;">
            <el-form :model="state.formData" label-position="top">
              <el-row :gutter="24" style="display: flex;justify-content: space-between;">
                <div style="background-color: rgba(255, 255, 255, 0.4);border-radius: 4px;
              border: 1px solid rgba(229, 231, 235, 1);padding: 16px;width: 50%;height: calc(100vh - 264px);">
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <h4 class="mask_sub_title">
                        <span style="margin-left: 0px;">列表背景及文字尺寸</span></h4>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="表格字号">
                        <el-select v-model="state.formData.tableSize" placeholder="请选择" style="width: 100%">
                          <el-option v-for="item in fontSizes" :key="item.value" :label="item.label"
                            :value="item.value" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="表格行高">
                        <el-select v-model="state.formData.tableHeight" placeholder="请选择" style="width: 100%">
                          <el-option v-for="item in rowHeight" :key="item.value" :label="item.label"
                            :value="item.value" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="弹窗表格字号">
                        <el-select v-model="state.formData.popupSize" placeholder="请选择" style="width: 100%">
                          <el-option v-for="item in fontSizes2" :key="item.value" :label="item.label"
                            :value="item.value" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="弹窗表格行高">
                        <el-select v-model="state.formData.popupHeight" placeholder="请选择" style="width: 100%">
                          <el-option v-for="item in rowHeight2" :key="item.value" :label="item.label"
                            :value="item.value" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="表头颜色">
                        <div class="color_switch">
                          <el-switch v-model="state.formData.tableHeadColorStatus" />
                          <div class="color">
                            <el-color-picker v-model="state.formData.tableHeadColorValue" :teleported="false"
                              :disabled="!state.formData.tableHeadColorStatus" show-alpha />
                          </div>
                        </div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="间隔行颜色">
                        <div class="color_switch">
                          <el-switch v-model="state.formData.intervalLineColorStatus" />
                          <div class="color">
                            <el-color-picker v-model="state.formData.intervalLineColorValue" :teleported="false"
                              :disabled="!state.formData.intervalLineColorStatus" show-alpha />
                          </div>
                        </div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="水平线">
                        <div class="color_switch">
                          <el-switch v-model="state.formData.levelLineStatus" />
                          <div class="color">
                            <el-color-picker v-model="state.formData.levelLineValue" :teleported="false"
                              :disabled="!state.formData.levelLineStatus" show-alpha />
                          </div>
                        </div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="垂直线">
                        <div class="color_switch">
                          <el-switch v-model="state.formData.verticalLineStatus" />
                          <div class="color">
                            <el-color-picker v-model="state.formData.verticalLineValue" :teleported="false"
                              :disabled="!state.formData.verticalLineStatus" show-alpha />
                          </div>
                        </div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="鼠标悬浮">
                        <div class="color_switch">
                          <el-switch v-model="state.formData.mouseSuspensionStatus" />
                          <div class="color">
                            <el-color-picker v-model="state.formData.mouseSuspensionValue" :teleported="false"
                              :disabled="!state.formData.mouseSuspensionStatus" show-alpha />
                          </div>
                        </div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="自动翻页">
                        <el-switch v-model="state.formData.autoPagerChrome" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="翻页间隔">
                        <el-select v-model="state.formData.flipInterval" placeholder="请选择" style="width: 100%"
                          :disabled="!state.formData.autoPagerChrome">
                          <el-option v-for="item in attainDataList" :key="item" :label="item" :value="item" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="刷新设置">
                        <el-switch v-model="state.formData.refresh" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="刷新间隔">
                        <el-select v-model="state.formData.timeInterval" placeholder="请选择" style="width: 100%"
                          :disabled="!state.formData.refresh">
                          <el-option v-for="item in attainDataList" :key="item" :label="item" :value="item" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <div class="head">列表文字颜色</div>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="故障">
                        <div class="color">
                          <el-color-picker color-format="rgb" show-alpha v-model="state.formData.faultColor"
                            :teleported="false" />
                        </div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="断电">
                        <div class="color">
                          <el-color-picker color-format="rgb" show-alpha v-model="state.formData.outageColor"
                            :teleported="false" />
                        </div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="断线">
                        <div class="color">
                          <el-color-picker color-format="rgb" show-alpha v-model="state.formData.disconnectionColor"
                            :teleported="false" />
                        </div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="报警">
                        <div class="color">
                          <el-color-picker color-format="rgb" show-alpha v-model="state.formData.alarmColor"
                            :teleported="false" />
                        </div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="休眠">
                        <div class="color">
                          <el-color-picker color-format="rgb" show-alpha v-model="state.formData.hibernateColor"
                            :teleported="false" />
                        </div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="正常">
                        <div class="color">
                          <el-color-picker color-format="rgb" show-alpha v-model="state.formData.normalColor"
                            :teleported="false" />
                        </div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="高电平">
                        <div class="color">
                          <el-color-picker color-format="rgb" show-alpha v-model="state.formData.highLevelColor"
                            :teleported="false" />
                        </div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="低电平">
                        <div class="color">
                          <el-color-picker color-format="rgb" show-alpha v-model="state.formData.lowLevelColor"
                            :teleported="false" />
                        </div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label=" 标校">
                        <div class="color">
                          <el-color-picker color-format="rgb" show-alpha v-model="state.formData.calibrationColor"
                            :teleported="false" />
                        </div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="其他">
                        <div class="color">
                          <el-color-picker color-format="rgb" show-alpha v-model="state.formData.otherColor"
                            :teleported="false" />
                        </div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <div class="head">列表单元格颜色</div>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="监测值背景">
                        <div class="color">
                          <el-color-picker color-format="rgb" show-alpha
                            v-model="state.formData.detectionBackgroundColor" :teleported="false" />
                        </div>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
                <div style="background-color: rgba(255, 255, 255, 0.4);border-radius: 4px;
              border: 1px solid rgba(229, 231, 235, 1);padding: 16px;margin-left: 10px;width: 49%;
              height: calc(100vh - 264px);">
                  <h4 class="mask_sub_title">
                    <svg-icon class-name="search-icon" icon-class="biaotitubiao" /><span>示例</span></h4>
                  <vxe-table height="600" :data="state.listAnalog" border="inner">
                    <vxe-column type="seq" title="编号"></vxe-column>
                    <vxe-column field="name" title="名称"></vxe-column>
                    <vxe-column field="value" title="检测值">
                      <template #default="{row}">
                        <span :style="{color:state.formData[row.color]}">{{ row.value }}</span>
                      </template>
                    </vxe-column>
                  </vxe-table>
                </div>

              </el-row>
            </el-form>
          </div>
          <div style="display: flex;justify-content: space-between;margin-top: 10px;">
            <el-button>字体</el-button>
            <div class="right">
              <el-button @click="getPageStyle">重置</el-button>
              <el-button type="primary" @click="saveStyle">保存</el-button>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="24" class="container2" v-if="radio1 == 2">
        <el-row :gutter="20">
          <el-col :span="4" v-for="item in state.ruleList">
            <div class="item">
              <div class="name">{{item.title}}</div>
              <div class="code">{{item.code}}</div>
              <div class="item_box">
                <div class="row">
                  <div class="one">分站编号</div>
                  <div class="two">{{item.stationCode}}</div>
                </div>
                <div class="row">
                  <div class="one">测点编号</div>
                  <div class="two">{{item.pointCode}}</div>
                </div>
                <div class="row">
                  <div class="one">编号</div>
                  <div class="two">{{item.pointValue}}</div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
  import axios from "@/utils/request";
  import {
    getattainDataList
  } from '@/api/config.js'
  import {
    getToken
  } from "@/utils/auth";
  import {
    ElMessage
  } from "element-plus";
  import {
    useRouter
  } from "vue-router";
  import {
    onMounted,
    ref,
    reactive
  } from "vue";
  const router = useRouter();
  const radio1 = ref("1");
  const fontSizes = ref([{
      value: '12px',
      label: '12px'
    },
    {
      value: '14px',
      label: '14px'
    },
    {
      value: '16px',
      label: '16px'
    },
    {
      value: '18px',
      label: '18px'
    },
  ])
  const fontSizes2 = ref([{
      value: '12px',
      label: '12px'
    },
    {
      value: '14px',
      label: '14px'
    },
    {
      value: '16px',
      label: '16px'
    },
    {
      value: '18px',
      label: '18px'
    },
  ])
  const rowHeight = ref([{
      value: '24px',
      label: '24px'
    },
    {
      value: '32px',
      label: '32px'
    },
    {
      value: '44px',
      label: '44px'
    },
    {
      value: '48px',
      label: '48px'
    },
    {
      value: '56px',
      label: '56px'
    },
  ])
  const rowHeight2 = ref([{
      value: '24px',
      label: '24px'
    },
    {
      value: '32px',
      label: '32px'
    },
    {
      value: '40px',
      label: '40px'
    },
    {
      value: '48px',
      label: '48px'
    },
    {
      value: '56px',
      label: '56px'
    },
  ])
  const state = reactive({
    ruleList: [{
        title: '模拟量',
        code: 'A',
        stationCode: '001',
        pointCode: '01',
        pointValue: '001A01'
      },
      {
        title: '开关量',
        code: 'D',
        stationCode: '001',
        pointCode: '02',
        pointValue: '001D02'
      },
      {
        title: '累计量',
        code: 'S',
        stationCode: '001',
        pointCode: '03',
        pointValue: '001S03'
      },
      {
        title: '虚拟测点',
        code: 'V',
        stationCode: '001',
        pointCode: '04',
        pointValue: '001A04V'
      },
      {
        title: '多参测点',
        code: 'M',
        stationCode: '001',
        pointCode: '05',
        pointValue: '001M05A01'
      }
    ],
    listAnalog: [{
      name: '故障样式',
      value: '故障',
      color: 'faultColor'
    }, {
      name: '断电样式',
      value: '断电',
      color: 'outageColor'
    }, {
      name: '断线样式',
      value: '断线',
      color: 'disconnectionColor'
    }, {
      name: '报警',
      value: '报警',
      color: 'alarmColor'
    }, {
      name: '休眠',
      value: '休眠',
      color: 'hibernateColor'
    }, {
      name: '正常',
      value: '100',
      color: 'normalColor'
    }, {
      name: '高电平',
      value: '有烟',
      color: 'highLevelColor'
    }, {
      name: '低电平',
      value: '无烟',
      color: 'lowLevelColor'
    }, {
      name: '标校',
      value: '标校',
      color: 'calibrationColor'
    }, {
      name: '其他',
      value: '其他',
      color: 'otherColor'
    }],
    formData: {
      mark: 'A',
      tableSize: '16px',
      tableHeight: '44px',
      popupSize: '16px',
      popupHeight: '44px',
      tableHeadColorValue: 'rgba(68, 136, 255, .12)',
      intervalLineColorValue: 'rgba(91, 109, 128, 0.04)',
      levelLineValue: 'rgba(91, 109, 128, 0)',
      verticalLineValue: 'rgba(91, 109, 128, 0)',
      mouseSuspensionValue: 'rgba(91, 109, 128, 0.04)',
      faultColor: 'rgba(255, 153, 0, 1)',
      outageColor: 'rgba(255, 221, 51, 1)',
      disconnectionColor: 'rgba(238, 102, 187, 1)',
      alarmColor: 'rgba(255, 85, 85, 1)',
      hibernateColor: 'rgba(136, 170, 204, 1)',
      normalColor: 'rgba(34, 68, 119, 1)',
      highLevelColor: 'rgba(102, 136, 255, 1)',
      lowLevelColor: 'rgba(85, 204, 153, 1)',
      calibrationColor: 'rgba(252, 249, 222, 1)',
      detectionBackgroundColor: 'rgba(34, 68, 119, 1)',
      otherColor: 'rgba(34, 68, 119, 0)'
    }
  })
  const attainDataList = ref([])
  // 获取页面编辑样式
  const getPageStyle = () => {
    axios.post('/page/edit/queryPageDetail', {
      mark: 'A'
    }).then(res => {
      if (res.data.length > 0) {
        state.formData = res.data[0]
      }
    })
    getattainDataList().then(res => {
      attainDataList.value = res.data
    })
  }

  // 保存样式到本地l
  const saveLocal = () => {
    document.querySelector(':root').style.setProperty('--font-size', state.formData.tableSize);
    document.querySelector(':root').style.setProperty('--row-height', state.formData.tableHeight);
    if (state.formData.tableHeadColorStatus) {
      document.querySelector(':root').style.setProperty('--header-bg', state.formData.tableHeadColorValue);
    } else {
      document.querySelector(':root').style.setProperty('--header-bg', 'rgba(68, 136, 255, .12)');
    }
    if (state.formData.intervalLineColorStatus) {
      document.querySelector(':root').style.setProperty('--stripe-bg', state.formData.intervalLineColorValue);
    } else {
      document.querySelector(':root').style.setProperty('--stripe-bg', 'rgba(91, 109, 128, 0.08)');
    }
    if (state.formData.levelLineStatus) {
      document.querySelector(':root').style.setProperty('--hline-color', state.formData.levelLineValue);
    } else {
      document.querySelector(':root').style.setProperty('--hline-color', '#ebeef5');
    }
    if (state.formData.verticalLineStatus) {
      document.querySelector(':root').style.setProperty('--vline-color', state.formData.verticalLineValue);
    } else {
      document.querySelector(':root').style.setProperty('--vline-color', '#ebeef5');
    }
    let pageSttting = {
      "fontSize": state.formData.tableSize,
      "rowHeight": state.formData.tableHeight,
      "headerBg": state.formData.tableHeadColorStatus ? state.formData.tableHeadColorValue :
        'rgba(68, 136, 255, .12)',
      "stripeBg": state.formData.intervalLineColorStatus ? state.formData.intervalLineColorValue :
        'rgba(91, 109, 128, 0.08)',
      "hlineColor": state.formData.levelLineStatus ? state.formData.levelLineValue : '#ebeef5',
      "vlineColor": state.formData.verticalLineStatus ? state.formData.verticalLineValue : '#ebeef5',
    };
    localStorage.setItem("page-set", JSON.stringify(pageSttting));
  }
  // 保存页面样式 /page/edit/update
  const saveStyle = () => {
    state.formData.mark = 'A'
    state.formData.vxeheadersList = []
    axios.post('/page/edit/update', state.formData).then(res => {
      if (res.code == 200) {
        ElMessage.success('操作成功')
        getPageStyle()
        saveLocal()
      }
    })
  }

  onMounted(() => {
    getPageStyle()
  })
</script>
<style lang="scss" scoped>
  .pagestyle {
    background-color: rgba(255, 255, 255, .8);
    margin: 10px;
    padding: 10px;
    border-radius: 8px;
    overflow-y: auto;
    width: 100%;
  }

  .head {
    margin-bottom: 10px;
  }

  :deep(.el-color-picker__mask) {
    display: none;

  }

  :deep(.el-form .el-form-item__label) {
    font-size: 16px;
    color: rgba(62, 70, 79, 0.8);
  }

  :deep(.el-color-picker) {
    width: 100%;
    border: none;
  }

  :deep(.el-color-picker__trigger) {
    width: 100%;
    border: none;
  }

  :deep(.el-color-picker__color) {
    border: none;
  }

  :deep(.el-color-picker__color-inner) {
    justify-content: end;
  }

  :deep(.el-color-picker .el-color-picker__icon) {
    color: rgba(62, 70, 79, 1);
    font-size: 18px;
    font-weight: bold;
    background-color: #f0f7ff;
    height: 100%;
    padding-left: 6px;
  }

  .color {
    padding: 4px;
    width: 100%;
    height: 32px;
    background-color: #f0f7ff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;

    .color_box {
      width: 71px;
      height: 24px;
    }
  }

  .color_switch {
    display: flex;
    width: 100%;

    .el-switch {
      width: 20%;
    }

    .color {
      margin-left: 16px;
      padding: 4px;
      width: 80%;
      height: 32px;
      background-color: #f0f7ff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
    }
  }

  .container2 {
    margin: 10px 0;
    height: 100%;
    border-radius: 8px;
    .item {
      padding: 22px 16px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      background: linear-gradient(180deg, rgba(242, 247, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
      border-radius: 4px;
      border: 1px solid rgba(68, 136, 255, 0.08);

      .name {
        font-size: 16px;
        color: rgba(62, 70, 79, 1);
        font-weight: 700;
      }

      .code {
        margin-top: 10px;
        width: 80px;
        height: 28px;
        font-size: 16px;
        font-weight: 700;
        background: rgba(68, 136, 255, 0.08);
        color: rgba(64, 158, 255, 1);
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .item_box {
        padding: 16px;
        width: 100%;
        height: 130px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .row {
          font-size: 14px;
          color: rgba(62, 70, 79, 1);
          display: flex;
          justify-content: space-between;

          .two {
            font-weight: 700;
          }
        }
      }
    }
  }
</style>